<template>
    <el-form :model="formData" label-width="120px" ref="form" v-loading="loading" class="pr-4">
        <el-form-item label="name" prop="name" :rules="{ required: true, message: '请填写该字段', trigger: 'blur' }">
            <el-input v-model="formData.name" name="name" clearable/>
        </el-form-item>
        <el-form-item label="单个图片" prop="img">
            <Upload v-model="formData.img"/>
        </el-form-item>
        <el-form-item label="单文件" prop="one_file">
            <UploadFiles v-model="formData.one_file" :limit="1"/>
        </el-form-item>
        <el-form-item label="多文件-限制3个文件" prop="many_files">
            <UploadFiles v-model="formData.many_files" :limit="3" multiple/>
        </el-form-item>
        <el-form-item label="富文本" prop="content">
            <Editor v-model="formData.content" name="content" height="700"/>
        </el-form-item>
        <el-form-item label="状态" prop="status">
            <el-radio-group v-model="formData.status">
                <el-radio
                    v-for="item in [
                        { label: '启用', value: 1 },
                        { label: '禁用', value: 2 }
                      ]"
                    :key="item.value"
                    :value="item.value"
                    name="status"
                >{{ item.label }}
                </el-radio>
            </el-radio-group>
            <!--            <el-select v-model="formData.status" placeholder="请选择" clearable>-->
            <!--                <el-option-->
            <!--                    v-for="item in [-->
            <!--                        {label: '启用', value: 1},-->
            <!--                        {label: '禁用', value: 2}-->
            <!--                    ]"-->
            <!--                    :key="item.value"-->
            <!--                    :label="item.label"-->
            <!--                    :value="item.value"-->
            <!--                />-->
            <!--            </el-select>-->
        </el-form-item>
        <el-form-item label="浮点数-2位小数" prop="dec">
            <el-input-number v-model="formData.dec" name="dec" :min="0" :precision="2" :step="0.01" clearable/>
        </el-form-item>
        <el-form-item label="整数-大于0" prop="number">
            <el-input-number v-model="formData.number" name="number" :min="0" :precision="0" clearable/>
        </el-form-item>
        <el-form-item label="多类型-固定值" prop="type">
            <el-select class="w-full" v-model="formData.type" placeholder="请选择一个类型" clearable>
                <el-option v-for="type_option in type_options" :key="type_option.value" :label="type_option.label" :value="type_option.value" />
            </el-select>
        </el-form-item>
        <el-form-item label="多类型-api" prop="type_api">
            <Select v-model="formData.type_api" name="type_api" api="GetTypeApi" clearable class="w-full" />
        </el-form-item>
        <el-form-item label="时间" prop="datetime">
            <el-date-picker
                v-model="formData.datetime"
                type="datetime"
                name="datetime"
                placeholder="请选择日期"
                value-format="YYYY-MM-DD HH:mm:ss"
                clearable
            />
        </el-form-item>
        <!--        <el-form-item label="时间" prop="datetime">-->
        <!--            <el-input v-model="formData.datetime" name="datetime" clearable/>-->
        <!--        </el-form-item>-->
        <el-form-item label="年" prop="year">
            <el-date-picker
                v-model="formData.year"
                type="year"
                name="year"
                placeholder="请选择年份"
                value-format="YYYY"
                clearable
            />
        </el-form-item>
        <el-form-item label="月" prop="month">
            <el-date-picker
                v-model="formData.month"
                type="month"
                name="month"
                placeholder="请选择月份"
                value-format="YYYYMM"
                clearable
            />
        </el-form-item>
        <el-form-item label="年月日" prop="date">
            <el-date-picker
                v-model="formData.date"
                type="date"
                name="date"
                placeholder="请选择日期"
                value-format="YYYY-MM-DD"
                clearable
            />
        </el-form-item>
<!--        <el-form-item label="json数组" prop="json_arr">-->
<!--            <el-input v-model="formData.json_arr" name="json_arr" clearable/>-->
<!--        </el-form-item>-->
        <el-form-item label="父级id" prop="parent_id">
            <el-input v-model="formData.parent_id" name="parent_id" clearable/>
        </el-form-item>
        <div class="flex justify-end">
            <el-button type="primary" @click="submitForm(form)">{{ $t('system.confirm') }}</el-button>
        </div>
    </el-form>
</template>

<script lang="ts" setup>
import {useCreate} from '@/composables/curd/useCreate'
import {useShow} from '@/composables/curd/useShow'
import {computed, onMounted, ref} from 'vue'
import http from "@/support/http";

const props = defineProps({
    primary: [String, Number],
    api: String,
})

const {formData, form, loading, submitForm, close} = useCreate(props.api, props.primary)

if (props.primary) {
    useShow(props.api, props.primary, formData)
}

const emit = defineEmits(['close'])
onMounted(() => {
    close(() => emit('close'))
})

const type_options = computed(() => {
    return [
        {
            value: 1,
            label: '类型1'
        },
        {
            value: 2,
            label: '类型2'
        },
        {
            value: 3,
            label: '类型3'
        }
        ,
        {
            value: 4,
            label: '类型4'
        }
    ]
})
console.log(type_options,'type_options')
</script>
